<script setup lang="ts">
import { reactive, ref } from 'vue';
import type { FormInst, UploadFileInfo } from 'naive-ui';
import { useMessage } from 'naive-ui';
import { useAppStore } from '@/store/modules/app';
import HTTP_URI from '@/api/base_url';
import { getToken } from '@/plugins/cookie';
import { REQUEST } from '@/api/request';
const emit = defineEmits(['ok']);
const message = useMessage();
const appStore = useAppStore();
const formRef = ref<FormInst | null>(null);
const showModal: any = ref(false);
const title: any = ref('');
const loading: any = ref(false);
const headers: any = reactive({
  token: getToken()
});
const formValue = ref({
  id: '',
  name: '',
  imgUrl: '',
  remark: ''
});
const open = (titles: string, data: any) => {
  // eslint-disable-next-line @typescript-eslint/no-use-before-define
  formValue.value = {
    id: '',
    name: '',
    imgUrl: '',
    remark: ''
  };
  title.value = titles;
  showModal.value = true;
  if (titles === '编辑商品') {
    formValue.value = {
      id: data.id,
      name: data.name,
      imgUrl: data.imgUrl,
      remark: data.remark
    };
  }
};
const rules = ref({
  name: {
    required: true,
    message: '请输入商品名称',
    trigger: 'blur'
  },
  imgUrl: {
    required: true,
    message: '请上传商品图片',
    trigger: 'blur'
  }
});
const previewImageUrlRef = ref('');
const previewFileList = ref([]);
const handlePreview = (file: UploadFileInfo) => {
  const { url } = file;
  console.log(file, '999');
  previewImageUrlRef.value = url as string;
};
// https://img.dsxbj.shop/20230602/0c11a2070b47c49d0ff34820e774dba.jpg
const handleCancel = () => {
  formValue.value = {
    id: '',
    name: '',
    imgUrl: '',
    remark: ''
  };
  showModal.value = false;
};
const addShopping = () => {
  loading.value = true;
  REQUEST.POST('SHOPADD', formValue.value).then((res: any) => {
    loading.value = false;
    if (res.status == 200) {
      message.success('添加成功！');
      emit('ok');
      handleCancel();
    }
  });
};
const editShopping = () => {
  loading.value = true;
  REQUEST.POST('SHOPEDIT', formValue.value).then((res: any) => {
    loading.value = false;
    if (res.status == 200) {
      message.success('编辑成功！');
      emit('ok');
      handleCancel();
    }
  });
};
const handleValidateClick = (e: MouseEvent) => {
  e.preventDefault();
  formRef.value?.validate(errors => {
    if (!errors) {
      if (title.value == '新增商品') {
        addShopping();
      } else {
        editShopping();
      }
    } else {
      message.warning('请完善表单');
    }
  });
};
defineExpose({ open });
</script>

<template>
  <NModal
    v-model:show="showModal"
    :style="{ width: !appStore.isMobile ? '500px' : '100%' }"
    class="custom-card"
    preset="card"
    :title="title"
  >
    <NCard :bordered="false" size="huge" role="dialog" aria-modal="true">
      <template #header-extra>x</template>
      <NForm
        ref="formRef"
        :label-width="80"
        :model="formValue"
        :rules="rules"
        :label-placement="!appStore.isMobile ? 'left' : 'top'"
      >
        <NFormItem label="商品名称" path="name">
          <NInput v-model:value="formValue.name" placeholder="请输入商品名称" />
        </NFormItem>
        <NFormItem label="商品图片" path="url">
          <NUpload
            :action="HTTP_URI.UPLOAD"
            :headers="headers"
            name="file"
            :default-file-list="previewFileList"
            list-type="image-card"
            @preview="handlePreview"
          >
            <NImage :src="formValue.imgUrl" style="width: 100%" />
          </NUpload>
          <NInput v-show="false" v-model:value="formValue.imgUrl" placeholder="请上传商品图片" />
        </NFormItem>
        <NFormItem label="备注" path="remark">
          <NInput
            v-model:value="formValue.remark"
            placeholder="请输入备注"
            type="textarea"
            :autosize="{
              minRows: 3,
              maxRows: 5
            }"
          />
        </NFormItem>
      </NForm>
      <template #footer>
        <NFlex justify="end">
          <NButton @click="handleCancel">取消</NButton>
          <NButton type="primary" :loading="loading" :disabled="loading" @click="handleValidateClick">确定</NButton>
        </NFlex>
      </template>
    </NCard>
  </NModal>
</template>
